<template>
    <div class="tenantContainer">
        <div class="searchContainer">
            <TenantSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain size="small" icon="PlusOutlined" @click="addTenantInfo()">添 加</el-button>
        </div>
        <div>
            <el-table
                :data="tenantDataList.dataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
            >
                <el-table-column prop="tenantId" label="租户ID" />
                <el-table-column prop="tenantName" label="租户名称-英文" />
                <el-table-column prop="tenantNameCn" label="租户名称-中文" />
                <el-table-column prop="tenantUserInfo.userAccount" label="租户管理员" />
                <el-table-column prop="tenantDescription" label="租户详情描述" />
                <el-table-column prop="tenantCompanyName" label="租户源公司名称" />
                <el-table-column prop="tenantCompanyContact" label="租户源联系方式" />
                <el-table-column align="center">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button type="primary" size="small" @click="handleCopy(scope.$index, scope.row)">复 制</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-model:current-page="tenantDataList.pageIndex"
                v-model:page-size="tenantDataList.pageSize"
                :small="false"
                :background="true"
                layout="prev, pager, next, jumper, sizes, total"
                :total="tenantDataList.recordCount"
                @change="changePage"
                :page-sizes="[10, 20, 30, 50, 100, 200, 400]"
                style="float: right"
            />
        </div>

        <div>
            <TenantAddOrUpdateDialog :tenantDataForm="tenantDataForm" :title="title"/>
        </div>

        <div>
            <TenantDeleteDialog :tenantDataForm="tenantDataForm"/>
        </div>
    </div>
</template>

<script>
import TenantSearch from "@/components/userRoleManage/tenantManage/TenantSearch";
import TenantAddOrUpdateDialog from "@/components/userRoleManage/tenantManage/TenantAddOrUpdateDialog";
import TenantDeleteDialog from "@/components/userRoleManage/tenantManage/TenantDeleteDialog";
import {tenantInfoQuery} from "@/request/tenant";
import {createTag} from "@/utils/tagCreate";

export default {
    name: "Tenant",
    components: {
        TenantSearch,
        TenantAddOrUpdateDialog,
        TenantDeleteDialog
    },
    data() {
        return {
            tenantDataForm: {
                id: '',
                tenantId: '',
                tenantName: '',
                tenantNameCn: '',
                tenantAdminUserId: '',
                tenantDescription: '',
                tenantCompanyName: '',
                tenantCompanyContact: ''
            },
            title: ""
        }
    },
    computed: {
        tenantSearchData() {
            return this.$store.state.tenantSearchData;
        },
        tenantDataList() {
            return this.$store.state.tenantDataList;
        }
    },
    methods: {
        handleUpdate(index, row) {
            this.title = "修改租户信息";
            this.tenantDataForm = {
                id: row.id,
                tenantId: row.tenantId,
                tenantName: row.tenantName,
                tenantNameCn: row.tenantNameCn,
                tenantAdminUserId: row.tenantAdminUserId,
                tenantDescription: row.tenantDescription,
                tenantCompanyName: row.tenantCompanyName,
                tenantCompanyContact: row.tenantCompanyContact
            }
            this.$store.state.tenantAddOrUpdateDialogVisible = true;
        },
        handleCopy(index, row) {
            this.title = "添加租户";
            this.tenantDataForm = {
                id: '',
                tenantId: row.tenantId,
                tenantName: row.tenantName,
                tenantNameCn: row.tenantNameCn,
                tenantAdminUserId: row.tenantAdminUserId,
                tenantDescription: row.tenantDescription,
                tenantCompanyName: row.tenantCompanyName,
                tenantCompanyContact: row.tenantCompanyContact
            }
            this.$store.state.tenantAddOrUpdateDialogVisible = true;
        },
        handleDelete(index, row) {
            this.tenantDataForm = {
                id: row.id,
                tenantId: row.tenantId,
                tenantName: row.tenantName,
                tenantNameCn: row.tenantNameCn,
                tenantAdminUserId: row.tenantAdminUserId,
                tenantDescription: row.tenantDescription,
                tenantCompanyName: row.tenantCompanyName,
                tenantCompanyContact: row.tenantCompanyContact
            }
            this.$store.state.tenantDeleteDialogVisible = true;
        },
        changePage(index, size) {
            this.tenantSearchData.pageInfo = {
                pageIndex: index,
                pageSize: size
            };
            tenantInfoQuery(this.tenantSearchData).then(res => {
                this.$store.state.tenantDataList = res.data
            })
        },
        addTenantInfo() {
            this.tenantDataForm = {
                id: '',
                tenantId: '',
                tenantName: '',
                tenantNameCn: '',
                tenantAdminUserId: '',
                tenantDescription: '',
                tenantCompanyName: '',
                tenantCompanyContact: ''
            }
            this.$store.state.tenantAddOrUpdateDialogVisible = true;
        }
    },
    mounted() {
        createTag(this.$route, this.$store)
    },
    created() {
        tenantInfoQuery(this.tenantSearchData).then(res => {
            if (res.code === '200') {
                this.$store.state.tenantDataList = res.data
            }
        })
    }
}
</script>

<style scoped lang="less">
.tenantContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
    .refreshContainer {
        margin-top: 5%;
        //去除光标
        caret-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}
</style>